<template>
  <div class="el-row-box">
    <el-row>
      <el-col :span="20"> {{ depart.name }}=={{ depart.id }}</el-col>
      <el-col :span="4">
        <el-row class="right-box">
          <el-col :span="12">{{ depart.manager }}</el-col>
          <el-col :span="12"
            ><el-dropdown>
              <span class="el-dropdown-link">
                操作<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="addDepart(depart.id)"
                  >添加子部门</el-dropdown-item
                >
                <el-dropdown-item
                  v-if="treeFlag"
                  @click.native="editDepart(depart)"
                  >编辑部门</el-dropdown-item
                >
                <el-dropdown-item @click.native="delDepart(depart.id)" v-if="treeFlag"
                  >删除部门</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown></el-col
          >
        </el-row></el-col
      >
    </el-row>
    <!-- 对话框 -->
    <addDia
      v-if="dialogFormVisible"
      :id="id"
      :isEdit="isEdit"
      :manager="manager"
      :depart-item="departItem"
      :dialog-form-visible.sync="dialogFormVisible"
      @success="getDepartment"
    />
  </div>
</template>
<script>
import addDia from '@/views/departments/components/addDia.vue'
import { getDepartManagerApi, delDepartmentApi } from '@/api/departments'
export default {
  name: 'Depart',
  components: {
    addDia
  },
  props: {
    depart: {
      type: Object,
      default: () => {}
    },
    treeFlag: {
      type: Boolean,
      default: false
    },
    getDepartment: {
      type: Function
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      manager: [],
      id: '',
      isEdit: false,
      departItem: {}
    }
  },
  computed: {},
  created() {},
  methods: {
    /* 添加部门 */
    addDepart(id) {
      this.isEdit = false
      /*
      部门分析
      1、显示对话框
      2、显示对话框中的表单布局
      3、展示部门负责人的数据
        3.1 封装api函数获取部门负责人的数据
        3.2 将数据展示
      4、点击对话框确认按钮
        4.1  校验表单
        4.2  封装api函数  添加部门的接口
        4.3  关闭对话框+刷新数据
        4.4  清空表单数据
       */

      // 1、显示对话框
      this.dialogFormVisible = true
      // 3.1 封装api函数获取部门负责人的数据
      this.getDepartManager()
      this.id = id
      this.departItem = {
        code: '',
        introduce: '',
        manager: '',
        name: '',
        pid: ''
      }
    },
    async getDepartManager() {
      const res = await getDepartManagerApi()
      console.log(res, 7)
      this.manager = res.data
    },

    /* 编辑部门 */
    editDepart(departItem) {
      /*
      1、显示对话框======跟添加属于同一个对话框
      2、获取数据并展示到表单中====判断是点击的添加还是编辑
      3、点击对话框中的确认按钮
        3.1 封装api函数修改部门负责人的数据
        3.2 发送编辑部门的请求 =====判断是点击的添加还是编辑发不同的请求
       */

      this.dialogFormVisible = true //  显示对话框
      // console.log(departItem, 8)
      this.isEdit = true
      // 获取每一项的数据  获取当前点击行的数据
      this.departItem = departItem

      // console.log(this.depart, 9)
    },

    /* 删除 */
    delDepart(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const res = await delDepartmentApi(id)
          // 确认按钮
          this.$message({
            type: 'success',
            message: '删除成功!'
          })

          //  成功后 刷新页面
          this.getDepartment()
        })
        .catch(() => {
          // 点击取消按钮
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>
<style lang='scss'  scoped>
.el-row-box {
  flex: 1;
  .el-col-12 {
    height: 26px;
  }
}
</style>
